$color:#ff5a00;

page {
	background-color: #efefef;
}

.m-shop-home-wrap {
	padding: 80upx 45upx 0;
}

.m-shop-home-title {
	display: flex;
	heigth: 50upx;
	line-height: 50upx;
}

.m-shop-home-title-icon {
	width: 30upx;
	height:50upx;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	background-image: url('');
}

.m-shop-home-title-name {
	width: 500upx;
	height: 50upx;
	margin-left:20upx;
	line-height: 50upx;
	font-size:20px;
	font-weight: bold;
}

.m-search-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 50upx;
	height:52upx;
	border:2px solid $color;
	border-radius: 60upx;
}

.m-search-inp {
	flex:1;
	text-indent: 60upx;
	font-size:14px;
	background-position: 24upx center;
	background-repeat: no-repeat;
	background-size: 30upx 30upx;
	background-image: url('');
}

.m-search-btn {
	width:110upx;
	height:52upx;
	line-height: 52upx;
	border-radius: 52upx;
	text-align: center;
	color:#fff;
	background-color: $color;
}

.m-banner-wrap {
	width:100%;
	height: 190upx;
	margin-top:40upx;
	image {
		width:100%;
		height:100%;
	}
}

.m-shop-item-wrap {
	margin-top: 40upx;
	padding: 44upx 24upx;
	background-color: #fff;
	border-radius: 10px;
}

.m-shop-item-title {
	display: flex;
	justify-content: space-between;
	height: 32upx;
	line-height: 32upx;
	font-size:16px;
}

.m-shop-item-name {
	border-left: 4px solid $color;
	padding-left:14upx;
	color:$color;
	font-weight: bold;
}

.m-shop-item-link {
	padding-right: 40upx;
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 32upx;
	background-image: url('');
}

.m-shop-item-info {
	margin-top:35upx;
	overflow: hidden;
}

.m-shop-item-item {
	float:left;
	width: 31%;
	margin-left:3.5%;
	
	image{
		width:100%;
		height:190upx;
		border-radius: 6px;
	}
}

.m-shop-item-item:nth-child(3n-2){
	margin-left:0;
}

.m-shop-item-item-name{
	margin-top:26upx;
	height:14px;
	line-height: 1;
	font-size:14px;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size:14px;
	color:#48504c;
}

.m-shop-item-item-count{
	font-size:12px;
	line-height: 2;
	color:#b3b3b3;
}

.m-shop-item-item-price{
	font-size:14px;
	color:#ff0000;
	.m-small {
		font-size: 8px;
	}
}

.m-shop-hot{
	margin-top:40upx;
}

.m-shop-hot-title {
	height:100upx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:16px;
	
	image {
		width:36upx;
		height:36upx;
	}
	
	text {
		margin-left:10upx;
		height: 36upx;
		line-height: 36upx;
	}
}

.m-shop-hot-info{
	overflow: hidden;
	padding-bottom: 160upx;
}

.m-shop-hot-item {
	float:left;
	width: 31%;
	padding:16upx;
	margin-left:3.5%;
	margin-bottom:20upx;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 10px;
	
	image {
		width: 100%;
		height:190upx;
	}
}

.m-shop-hot-item:nth-child(3n-2){
	margin-left:0;
}

.m-hot-price {
	margin-top:10upx;
}

.m-hot-count{
	color:#444;
}

.m-shop-nav-wrap {
	position: fixed;
	left:0;
	right:0;
	bottom:0;
	background-color: #fff;
	padding:35upx 30upx 25upx;
	display: flex;
	navigator{
		flex:1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	image {
		width:50upx;
		height:50upx;
	}
	view{
		font-size:14px;
		font-weight: bold;
		color:#878787;
		line-height: 40upx;
	}
}

.m-nav{
	// height: 340upx;
	margin-top:40upx;
	padding: 40upx 26upx 0;
	background-color: #fff;
	border-radius: 10px;
}

.m-nav-wrap{
	display: flex;
	flex-wrap: wrap;
	align-content: baseline;
}

.m-nav-item {
	width: 20%;
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	padding-bottom: 20upx;
	image {
		width:80upx;
		height: 80upx;
	}
	view {
		width: 100%;
		height:60upx;
		line-height: 60upx;
		font-size:12px;
		font-weight: bold;
		color:#48504c;
		text-align: center;
	}
}